<template>
    <div class="loading">
        <div class="cir">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.loading{
    position: fixed;
    top:0;
    left:0;
    z-index: 1000;
    background:#141518;
    width:100%;
    height:100%;
    .cir{
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-45px;
        span{
            display: inline-block;
            width:30px;
            height:30px;
            margin-right:20px;
            background-color: white;
            border-radius: 50%;
            animation: cir 1s infinite;
        }
        span:nth-child(1){
             animation-delay: -0.32s;
        }
        span:nth-child(2){
             animation-delay: -0.16s;
        }
        span:nth-child(3){
             animation-delay: 0;
        }
        @keyframes cir {
             0%, 80%, 100% {
            transform: scale(0.0);
        } 40% {
            transform: scale(1.0);
        }
        }
    }
}
</style>